import { defineComponent } from "vue";
import { useLayoutStore } from "../store/index";
import PageSetting from "./settings/PageSetting";
import ButtonSetting from "./settings/ButtonSetting";

export default defineComponent({
  setup() {
    const layout = useLayoutStore();
    const settingsMap = new Map();
    settingsMap.set("Button", ButtonSetting);

    return () => {
      let Content: any;

      if (
        layout.getComponents.filter((component) => component.selected === true)
          .length === 0
      ) {
        Content = <PageSetting></PageSetting>;
      } else {
        let current = layout.getComponents.find(
          (component) => component.selected === true
        );
        let currentComponent = settingsMap.get(current.component);
        Content = currentComponent ? (
          <currentComponent item={current}></currentComponent>
        ) : null;
      }

      return <div class="setting-left">{Content}</div>;
    };
  },
});
